<script lang="ts" setup>
import { useFormDisabled, useFormItem } from 'element-plus'

type TagObject = {
  label: string
  value: string
}
withDefaults(
  defineProps<{
    list: TagObject[]
    disabled?: boolean
  }>(),
  {
    disabled: false
  }
)
const emit = defineEmits(['change'])
const isDisabled = useFormDisabled()
const { formItem } = useFormItem()
const modelValue = defineModel<string>({ required: true })

const tagClick = (item: TagObject) => {
  if (!isDisabled.value) {
    modelValue.value = item.value
    emit('change', item.value)
    formItem?.validate('change').catch(() => {})
  }
}
</script>

<template>
  <div>
    <el-tag
      v-for="(item, index) in list"
      :key="index"
      :type="item.value === modelValue ? '' : 'info'"
      v-bind="$attrs"
      @click="tagClick(item)">
      {{ item.label }}
    </el-tag>
  </div>
</template>

<style scoped>
.el-tag {
  margin-right: 12px;
  cursor: pointer;
  box-sizing: border-box;
}
.el-tag {
  height: 28px;
  line-height: 26px;
  font-size: 14px;
  font-family: MiSans-Regular, MiSans;
  font-weight: 400;
  padding: 0 8px;
}
.el-tag.el-tag--info {
  background: #fff;
  border-color: #fff;
  color: #747882;
}
</style>
